<div class="input-group" id="cpgroup-{{$id}}">
    <input type="text" class="form-control {{$class}}" value="{{$value}}" id="{{$id}}" name="{{$name}}" placeholder="{{$placeholder}}"
           {{$disabled ? 'disabled="disabled"':''}} {{$readonly ? 'readonly="readonly"':''}}
    >
    <span class="input-group-append input-group-btn add-on">
          <button type="button" class="btn btn-primary">
              &nbsp;<i style="width:15px;height:15px;line-height:15px;vertical-align:baseline;display:inline-block;color:transparent;background:{{$value|default='#f1f1f1'}};">■</i>&nbsp;
          </button>
    </span>
</div>
{{:builder_event_listen($js_hook, function () use($id,$format) {
return <<<HOOK
<script type="text/javascript">
    $(document).ready(function () {
        var _cpGroupId = '#cpgroup-{$id}';
        $(_cpGroupId).colorpicker({format: '{$format}'});
    });
</script>
HOOK;
})}}